﻿@model WebApp.Models.MenuItem

<script type="text/javascript">
//初始化 MenuItem datagrid
var $menuitemsdg = $('#childmenuitems_datagrid');
  $(() => {
    $menuitemsdg.datagrid({
      rownumbers: true,
      iconCls: 'fa fa-list',
      idField: 'Id',
      sortName: 'Id',
      sortOrder: 'asc',
      remoteFilter: true,
      singleSelect: true,
      method: 'get',
      onClickCell: menuitems_onClickCell,
      pagination: true,
      striped: true,
      onLoadSuccess: function (data) {
        menuitems_editIndex = undefined;
      },
      columns: [[
        /*{field:'Id',width:80 ,sortable:true,resizable:true }*/
        {
          field: 'Title',
          title: '<span class="required">@Html.DisplayNameFor(model => model.Title)</span>',
          width: 160,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.Title)', required: true, validType: 'length[0,50]' }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'Description',
          title: '@Html.DisplayNameFor(model => model.Description)',
          width: 160,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.Description)', required: false, validType: 'length[0,100]' }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'Code',
          title: '<span class="required">@Html.DisplayNameFor(model => model.Code)</span>',
          width: 90,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.Code)', required: true, validType: 'length[0,20]' }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'Url',
          title: '<span class="required">@Html.DisplayNameFor(model => model.Url)</span>',
          width: 220,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.Url)', required: true, validType: 'length[0,100]' }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'Controller',
          title: '@Html.DisplayNameFor(model => model.Controller)',
          width: 260,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.Controller)', required: false, validType: 'length[0,100]' }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'Action',
          title: '@Html.DisplayNameFor(model => model.Action)',
          width: 140,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.Action)', required: false, validType: 'length[0,100]' }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'IconCls',
          title: '@Html.DisplayNameFor(model => model.IconCls)',
          width: 120,
          editor: {
            type: 'textbox',
            options: { prompt: '@Html.DisplayNameFor(model => model.IconCls)', required: false }
          },
          sortable: true,
          resizable: true
        },
        {
          field: 'IsEnabled',
          title: '<span class="required">@Html.DisplayNameFor(model => model.IsEnabled)</span>',
          width: 80,
          align: 'center',
          editor: {
            type: 'booleaneditor',
            options: {
              prompt: '@Html.DisplayNameFor(model => model.IsEnabled)',
              required: true
            }
          },
          formatter: booleanformatter,
          sortable: true,
          resizable: true
        },
        {
          field: 'ParentId',
          title: '@Html.DisplayNameFor(model => model.ParentId)',
          width: 140,
          sortable: true,
          resizable: true,
          formatter: function (value, row) {
            return row.ParentTitle;
          },
          editor: {
            type: 'combobox',
            options: {
              prompt: '@Html.DisplayNameFor(model => model.ParentId)',
              mode: 'remote',
              valueField: 'Id',
              textField: 'Title',
              method: 'get',
              url: '/MenuItems/GetMenuItemsAsync',
              required: false
            }
          }
        },
      ]]
    });
    //初始化 datagrid filter
    //$menuitemsdg.datagrid("enableFilter", [
    //  {
    //    field: "Id",
    //    type: "numberbox",
    //    op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
    //  },
    //  {
    //    field: "IsEnabled",
    //    type: "booleanfilter"
    //  },
    //  {
    //    field: "ParentId",
    //    type: "combobox",
    //    options: {
    //      valueField: "Id",
    //      textField: "Title",
    //      method: "get",
    //      url: "/MenuItems/GetMenuItemsAsync",
    //      onChange: function (value) {
    //        if (value == "") {
    //          $menuitemsdg.datagrid("removeFilterRule", "ParentId");
    //        } else {
    //          $menuitemsdg.datagrid("addFilterRule", {
    //            field: "ParentId",
    //            op: "equal",
    //            value: value
    //          });
    //        }
    //        $menuitemsdg.datagrid("doFilter");
    //      }
    //    }
    //  },
    //]);

  });
    //datagrid CRUD method
    var menuitems_editIndex = undefined;
    //取消
    function menuitems_reject() {
		$menuitemsdg.datagrid("rejectChanges");
		menuitems_editIndex = undefined;
    }
    //重新加载数据
    function menuitems_reload() {
			if (endEditing()) {
				$menuitemsdg.datagrid("reload");
			}
	}
    //关闭编辑状态
	function menuitems_endEditing() {
			if (menuitems_editIndex === undefined) {
                return true; 
            }
			if ($menuitemsdg.datagrid("validateRow", menuitems_editIndex)) {

								var ed = $menuitemsdg.datagrid("getEditor", { index: menuitems_editIndex, field: "ParentId" });
				var parenttitle = $(ed.target).combobox("getText");
				var parentid = $(ed.target).combobox("getValue");
				$menuitemsdg.datagrid("getRows")[menuitems_editIndex]["ParentTitle"] =  parenttitle;
				$menuitemsdg.datagrid("getRows")[menuitems_editIndex]["ParentId"] = parentid;
								$menuitemsdg.datagrid("endEdit", menuitems_editIndex);
				menuitems_editIndex = undefined;
                return true;
			} else {
				return false;
			}
		}
    //单击列开启编辑功能
	function menuitems_onClickCell(index, field) {
			var _operates = ["_operate1", "_operate2", "_operate3", "ck"];
			if ($.inArray(field, _operates) >= 0) {
				return false;
			}
			if (menuitems_editIndex !== index) {
				if (menuitems_endEditing()) {
					$menuitemsdg.datagrid("selectRow", index)
							.datagrid("beginEdit", index);
                    menuitems_editIndex = index;
					var ed = $menuitemsdg.datagrid("getEditor", { index: index, field: field });
					if (ed) {
						($(ed.target).data("textbox") ? $(ed.target).textbox("textbox") : $(ed.target)).focus();
					}
				} else {
					$menuitemsdg.datagrid("selectRow", menuitems_editIndex);
				}
			}
		}
        //新增记录
    function menuitems_append() {
			if (menuitems_endEditing()) {
				//对必填字段进行默认值初始化
				$menuitemsdg.datagrid("insertRow", 
                               { index: 0,
                                  row: {
                                  
                                  ParentId:menuitemid
                                  }
                                });
				menuitems_editIndex = 0;
				$menuitemsdg.datagrid("selectRow", menuitems_editIndex)
						.datagrid("beginEdit", menuitems_editIndex);
			}
		}
    //删除编辑的行
	function menuitems_removeit() {
		if (menuitems_editIndex !== undefined) {  
			$menuitemsdg.datagrid("cancelEdit", menuitems_editIndex)
					           .datagrid("deleteRow", menuitems_editIndex);
			menuitems_editIndex = undefined;
        }
	}
    //删除选中的行
    function menuitems_deletechecked() {
            var rows = $menuitemsdg.datagrid("getChecked");
            if (rows.length > 0) {
                var id = rows.map(item => {
                    return item.Id;
                });
                $.messager.confirm("确认", "你确定要删除这些记录?",result => {
                    if (result) {
                        $.post("/MenuItems/DeleteCheckedAsync", { id: id })
                         .done(response => {
                            if (response.success) {
                                $menuitemsdg.datagrid("reload");
                            } else {
                                $.messager.alert("错误", response.err,"error");
                            }
                         });
                    }
                });  
            } else {
                $.messager.alert("提示", "请先选择要删除的记录!");
            }
      }
    //提交保存后台数据库
	function menuitems_accept() {
			if (menuitems_endEditing()) {
				if ($menuitemsdg.datagrid("getChanges").length) {
					var inserted = $menuitemsdg.datagrid("getChanges", "inserted");
					var deleted = $menuitemsdg.datagrid("getChanges", "deleted");
					var updated = $menuitemsdg.datagrid("getChanges", "updated");
					var item = new Object();
					if (inserted.length) {
						item.inserted = inserted;
					}
					if (deleted.length) {
						item.deleted = deleted;
					}
					if (updated.length) {
						item.updated = updated;
					}
					//console.log(JSON.stringify(item));
					$.post("/MenuItems/SaveDataAsync", item)
                     .done(response => {
						//console.log(response);
						if (response.success) {
							$.messager.alert("提示", "提交成功!");
							$menuitemsdg.datagrid("acceptChanges");
							$menuitemsdg.datagrid("reload");
						} else {
                           $.messager.alert("错误", response.err ,"error");
                        }
					  })
                      .fail((jqXHR, textStatus, errorThrown) => {
						//console.log(errorThrown);
						$.messager.alert("错误", "提交错误了!" + errorThrown,"error");

					  });
				}
			}
		}       
</script>


 